<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta name="viewport" content="user-scalable=no"/>
	<title>button</title>
	<link rel="stylesheet" href="../common/jquery.mobile-1.1.0.min.css" />
	<link rel="stylesheet" href="../common/BingoTouch.css" />
	<script src="../common/iscroll.js"></script>
	<script src="../common/jquery-1.7.1.min.js"></script>
	<script src="../common/jquery.mobile-1.1.0.min.js"></script>
	<script src="../common/BingoTouch.js"></script>
</head>
<body>
<div data-role="page" class="container">
   <div data-role="content">
		<div class="header">
			<h1 class="title">Buttons</h1>
			<div class="header-left">
				<div class="btn-back" data-role="BTButton" data-url="home.html">返回</div>
			</div>
			<div class="header-right">
				<div class="btn-group">
					<div class="btn-primary" data-role="BTButton">
						<img src="statics/images/icon-refresh.png" alt=""/>
					</div>
					<div class="btn-primary" data-role="BTButton" data-icon="icon-arrow-right" icon-dir="right">
						返回
					</div>
				</div>
			</div>		
		</div>
		<div class="content">
			<div class="content-inner">	
				<h1>一、按钮样式</h1>
				<h2>1.1所有按钮元素--从小到大 四种颜色组合选择</h2>
				<div class="btn-control">
					<!-- 按钮元素 -->
					data-role="BTButton"
					<div data-role="BTButton">普通按钮</div>
					class="btn-inverse"
					<div class="btn-inverse" data-role="BTButton">深色按钮</div>
					class="btn-primary btn-large"
					<div class="btn-primary btn-large" data-role="BTButton">主要按钮</div>
					class="btn-success btn-xlarge"
					<div class="btn-success btn-xlarge" data-role="BTButton">成功按钮</div>
					class="btn-danger btn-xxlarge"
					<div class="btn-danger btn-xxlarge" data-role="BTButton">危险按钮</div>
					
				</div>
				<h2>1.2有图标的按钮</h2>
				<div class="btn-control">
					data-icon="icon-arrow-up" 图标:classname或者直接插入图片路径<br/>
					icon-dir="top"	图标的方向:top bottom left right
					<div class="btn-primary" data-role="BTButton" data-icon="icon-arrow-up" icon-dir="top">主要按钮</div>
					<div class="btn-primary" data-role="BTButton" data-icon="icon-arrow-down" icon-dir="bottom">主要按钮</div>
					<div class="btn-primary" data-role="BTButton" data-icon="icon-arrow-left" icon-dir="left">主要按钮</div>
					<div class="btn-primary" data-role="BTButton" data-icon="icon-arrow-right" icon-dir="right">主要按钮</div>
				</div>
				<h2>1.3只有图标的按钮</h2>
				<div class="btn-control">					
					data-type="image" 
					<div data-role="BTButton" data-type="image"><img src="statics/images/icon-refresh.png" alt=""/></div>
				</div>	
				<h2>1.4只有文本的按钮</h2>
				<div class="btn-control">					
					data-type="text" 
					<div data-role="BTButton" data-type="text">文本按钮</div>
				</div>				
				
				<!-- 按钮群组 -->
				<h2>1.5把按钮群组</h2>
				<div class="btn-group">
					<div class="btn-primary" data-role="BTButton" data-icon="icon-arrow-left" icon-dir="left">
						返回
					</div>
					<div class="btn-primary" data-role="BTButton">
						刷新
					</div>
					<div class="btn-primary" data-role="BTButton">
						<img src="statics/images/icon-refresh.png" alt=""/>
					</div>
				</div>
				<div class="btn-group">
					<div class="btn-inverse" data-role="BTButton" data-icon="icon-arrow-left" icon-dir="left">
						返回
					</div>
					<div class="btn-inverse" data-role="BTButton">
						刷新
					</div>
					<div class="btn-inverse" data-role="BTButton">
						<img src="statics/images/icon-refresh.png" alt=""/>
					</div>
				</div>
				<h2>1.6把群组 class=inline 变一行显示</h2>
				<div class="btn-group inline">
					<div class="btn-success" data-role="BTButton">
						刷新
					</div>
					<div class="btn-success" data-role="BTButton">
						<img src="statics/images/icon-refresh.png" alt=""/>
					</div>
				</div>
				<div class="btn-group inline">
					<div class="btn-danger" data-role="BTButton" data-icon="icon-arrow-left" icon-dir="left">
						返回
					</div>
					<div class="btn-danger" data-role="BTButton">
						刷新
					</div>
				</div>
				<h1 style="clear:both;">二、按钮事件</h1>
				<h2>2.1有跳转的按钮</h2>
				<div class="btn-control">					
					data-url="home.html" 目标路径
					<div data-role="BTButton" data-url="home.html" >点击跳转</div>
				</div>	
				<h2>2.2取消按钮点击高亮效果</h2>
				<div class="btn-control">
					效果1：class="btn-active" 原来有激活效果，点击后原有激活效果消失，可以一直点击有效果
					<div class="btn-primary btn-active" data-role="BTButton">留意松开时的效果</div>
					效果2：mousedown="false" 按下去没有点击效果，松开如果有原有高亮会被取消，跟第1种效果一样，不一样的地方在于再次点击也不会有效果了
					<div class="btn-primary btn-active" data-role="BTButton" mousedown="false">留意松开时的效果</div>
					效果3：如果不想消失，加多个属性 mouseup="false" 点击松开不取消点击效果，但是还是会触发按下去的事件	
					<div class="btn-primary btn-active" data-role="BTButton" mouseup="false">留意松开时的效果</div>
					效果4：如果想对按钮重新绑定新的事件，自由控制高亮效果，需要两个属性一起使用
					mousedown="false" mouseup="false"	按下去没有效果，跟效果3相似
					<div class="btn-primary" data-role="BTButton" mousedown="false" mouseup="false">按下去没有效果</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>